<template>
  <div>
    <h2>您好，欢迎超级管理员admin123登录本系统</h2>


  <el-card class="home-content">
    <div slot="header">
    <span>平台基本信息</span>
    </div>

    <div class="info-content">
      <div class="info-content-item">
        <span class="item-icon el-icon-user-solid"></span>
        <div  class="item-info-detail">
          <span>用户数量</span>
          <b>{{formData.userTotal}}</b>
        </div>
      </div>
          <div class="info-content-item">
          <span class="item-icon el-icon-star-on"></span>

          <div class="item-info-detail">
            <span>商品数量</span>
            <b>{{formData.goodsTotal}}</b>
          </div>
        </div>
        <div class="info-content-item">
          <span class="item-icon el-icon-shopping-cart-full"></span>

          <div class="item-info-detail">
            <span>货品数量</span>
            <b>{{formData.productTotal}}</b>
          </div>
        </div>
        <div class="info-content-item">
          <span class="item-icon el-icon-phone"></span>

          <div class="item-info-detail">
            <span>订单数量</span>
            <b>{{formData.orderTotal}}</b>
          </div>
        </div>
    </div>
  </el-card>
    </div>
</template>
  
<script>
import axios from 'axios'
export default {
  name: 'home',
  componentTitle: '首页',
  data () {
    return {
      formData:{},
    }
  },
  mounted(){
    axios({
         url: 'http://192.168.200.251:8888/admin/dashboard',
      method: 'get',
      headers: {
          'Shopping-Admin-Token': sessionStorage.getItem('Shopping-Admin-Token')
        }
    }).then(res => {
      this.formData = res.data.data
    })
   
  }
}
</script>
<style scoped lang='scss'>
h2{
  padding-left:30px
}
.home-content{
  margin:30px
}
.info-content{
  display: flex;

  .info-content-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    flex: 1;
    height: 108px;
    box-shadow: 0px 0px 15px #ddd;

    .item-icon{
      font-size:50px
    }
    .el-icon-user-solid{
      color:#40c9c6
    }
    .el-icon-star-on {
        color: #36a3f7;
    }
    .el-icon-shopping-cart-full {
        color: #f4516c;
    }
    .el-icon-phone {
        color: #34bfa3;
  }
  &:hover{
    .item-icon{
      background: #40c9c6;
      color: #fff;
    }
  }
  .item-info-detail{
    display: flex;
    flex-direction: column;
    color: rgba(0,0,0,.45);
     font-size: 16px;

      :first-child {
        margin-bottom: 15px;
      }
  }
  }
  .info-content-item + .info-content-item{
       margin-left:40px
  }
}
</style>

